@import "@primer/css/support/variables/typography.scss";

$ol-circled-reduce-diameter: 2px;
// line-height is 24 pixels (16 * 1.5), and we want a 22px diameter but respect the line-height.

.markdownBody {
  > :global(.ghd-tool) > ol:not(:global(.no-styling)),
  > ol:not(:global(.no-styling)) {
    // We will remove the default list style and use contrasting circled counter instead
    list-style: none;
    counter-reset: markdown-ordered-list;

    // So that list items have the same margin regardless of `li > p` or `li > [text]`
    > li {
      margin-bottom: 16px;
    }

    // This is the contrasting circled counter for the list item
    > li::before {
      counter-increment: markdown-ordered-list;
      content: counter(markdown-ordered-list);
      float: left;
      width: calc(1.5rem - $ol-circled-reduce-diameter);
      margin-left: -2rem;
      margin-top: $ol-circled-reduce-diameter / 2;
      font-size: $h5-size;
      line-height: calc(1.5rem - $ol-circled-reduce-diameter);
      font-weight: 500;
      text-align: center;
      background-color: var(--color-fg-default);
      color: var(--color-canvas-default);
      border-radius: 50%;
    }

    // Any list below top level uses plain letters
    ol {
      list-style-type: lower-alpha;
    }
  }
}
